<template>
	<view class="flex-1 hb column hidden">
		<view class="ptb23 plr30 border-box bgf">
			<u-search v-model="queryParams.keywords" placeholder="输入你要找的车源" placeholderColor="#BDBCBA" shape="square"
				height="73rpx" :showAction="false" @search="reSetList()"></u-search>
		</view>
		<view class="text-right fs24 w-calc-32 mt21" style="color: #FF2121;">
			请及时关注车源状态，已售车源请及时下架
		</view>
		<view class="esay-out2">
			<u-tabs @click="handleTabs" :list="tabs" lineWidth="40rpx" keyName="label" lineColor="#0759BB" :scrollable="false"
				lineHeight="3rpx" :activeStyle="{
					color: '#0759BB',
					fontWeight: 'bold',
					fontSize: '28rpx',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#000000',
					fontSize: '28rpx',
					transform: 'scale(1)'
				}" />
		</view>
		<view class="flex-1 hb column hidden p30">
			<scroll-view class="hb" :scroll-y="true" :refresher-enabled="scrollViewTool.isEnabled"
				:refresher-triggered="scrollViewTool.triggered" refresher-background="rgba(0,0,0,0)"
				@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false" :upper-threshold="100"
				:lower-threshold="100" @refresherabort="triggered = false" @scrolltolower="reachBottom">
				<!-- listData.length>0 -->
				<template v-if="listData.length>0">
					<view  
					v-for="(item,index) in listData" :key="item.id"
					 class="esay-out3 bgf radius30 pb30 margin-bom">
						<view class="plr30 pt30 ">
							<view class="item-ctn">
								<view class="top">
									<view class="fs28 flow-h" style="">车源编号:{{item.order_no}}</view>
									<view class="align-center">
										<view class="">
											<text :class="statusText[item.apply_status].color" >
												{{statusText[item.apply_status].text}}
											</text>
										</view>
										<u-line length="30rpx" color="#D1D1D1" margin="0 30rpx" direction="col" />
										<view class="">
											<view class="delete" 
											@click.stop="handleItem(item,item.apply_status,statusText[item.apply_status].btnText)">{{statusText[item.apply_status].btnText}}</view>
										</view>
									</view>
								</view>
							</view>
							<view class="good-item mt21" @click="navTo('pages/release/vehicle/detail',{id:item.id,signBs:1})">
								<view class="relative">
									<u-image :src="item.images" width="220rpx"
										height="164rpx" radius="10rpx" />
									<view class="tag">出价领红包</view>
								</view>
								<view class="ml24 flex-1">
									<view class="name">{{item.name}}</view>
									<view class="time">{{item.on_plate_time}}/{{item.mileage}}万公里</view>
									<view class="price">{{item.price}}万</view>
									<view class="bottom">
										<view class="left">
											<view class="point">
												<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/home/map.png" width="18rpx"
													height="23rpx"></u-image>
												<view class="text">{{item.province}}</view>
											</view>
										</view>
										<view class="right">批发价:{{item.wholesale_price}}万</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="item.apply_status==2">
							<u-line margin="29rpx 0 20rpx 0"></u-line>
							<view class="w-calc-24" >
								<view class="fs28" style="color: #393939">原因：</view>
								<view class="w100 radius20 plr19 ptb30 border-box mt20"
									style="background-color: #f4f4f4; min-height: 157rpx">{{item.refuse_reason}}</view>
							</view>
							<view class="justify-end align-center mt21 w-calc-32">
								<view @click="handleCarUpdata(item)" class="update-but">修改资料</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="loadStatus" />
				</template>
				<view class="flex-1 hb centerV" v-else>
					<fr-empty-data />
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		savePhotos,
		navTo,
		showModel
	} from '@/core/app';
	import {
		useLoadPageList
	} from '@/hooks/useLoadPageList/useLoadPageList.js';
	import {
		getMyCarSource,carSell,carCancelSell,
		carDelete,carReSubmit,carUpdate,
		getMyCarSourceCount
	} from "@/api/user/carSource";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		useCarHook
	} from './hooks/index';
	const {
		tabs,
		getMyCarSourceCountApi,handleCheckState
	} = useCarHook(4)
	const queryParams = ref({
		apply_status: 1, //0待审核 1通过 2拒绝 -1关闭
		keywords: '', //搜索
		type: 4, //1求购 2收购 3批发 4车源  0所有
	});
	const {
		listData,
		getListData,
		listDataDelay,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList
	} =
	useLoadPageList(getMyCarSource, queryParams.value);
	
	const statusNum = ref(0)

	onLoad(() => {
		getMyCarSourceCountApi(4,tabs.value)
		getListData()
		
	})
	
	//切换分类
	const handleTabs = (item) => {
		queryParams.value.apply_status = item.value
		reSetList()
	}
	 //0待审核 1通过 2拒绝 -1关闭
	 const statusText = {
	 	0:{text:'待审核',color:'base-price',btnText:'取消发布'},
	 	1:{text:'在库销售',color:'base-color',btnText:'取消售卖'},
	 	2:{text:'审核驳回',color:'base-price',btnText:'重新提交'},
	 	'-1':{text:'已下架',color:'base-color',btnText:'上架'}
	 }
	//更改状态
	const handleItem = (item,status,btnText)=>{
		handleCheckState(item,status,btnText,()=>{
			reSetList()
			getMyCarSourceCountApi(4,tabs.value)
		})
	}
	
	// }
	//修改资料
	const handleCarUpdata = (item)=>{
		uni.navigateTo({
			url:'/pages/release/vehicle/index',
			success:res=>{
				res.eventChannel.emit('carData',item)
			}
		})
	}

</script>

<style scoped lang="scss">
	.margin-bom{
		margin-bottom:20rpx;
	}
	.flow-h{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #393939;flex:1;margin-right:10rpx;
	}
	.input-ctn {
		width: 100%;
		height: 73rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 2rpx solid #0759bb;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 16rpx;
		box-sizing: border-box;

		.input-css {
			font-weight: 400;
			font-size: 26rpx;
		}

		.holder {
			font-weight: 400;
			font-size: 26rpx;
			color: #bdbcba;
		}
	}

	.item-ctn {
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.center-box {
				margin-left: 19rpx;
				flex: 1;

				.nt {
					width: 100%;
					font-weight: bold;
					font-size: 28rpx;
					color: #000000;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.tag {
						width: 64rpx;
						height: 31rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: bold;
						font-size: 22rpx;
						color: #ffffff;
						border-radius: 5rpx;
						margin-left: 8rpx;
					}

					.tag-red {
						background-color: #d74d35;
					}

					.tag-yellow {
						background-color: #f9d03c;
					}
				}

				.time {
					margin-top: 11rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #5b5b5b;
				}
			}

			.delete {
				width: 112rpx;
				height: 48rpx;
				background: #ececec;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #ececec;
				font-weight: 400;
				font-size: 23rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.content {
		padding: 0 7rpx;
		box-sizing: border-box;
		margin-top: 18rpx;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.sub-title {
			margin-top: 13rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.funcs {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		.func {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
			margin-left: 54rpx;
			gap: 5rpx;
		}
	}

	:deep(.u-search__content) {
		border-radius: 20rpx !important;
	}

	.good-item {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.tag {
			position: absolute;
			top: 0;
			left: 0;
			background: #f9de49;
			border-radius: 10rpx 0rpx 10rpx 0rpx;
			width: 122rpx;
			height: 35rpx;
			padding: 4rpx 10rpx 3rpx 11rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 20rpx;
			color: #000000;
		}

		.name {
			font-weight: 600;
			font-size: 28rpx;
			color: #000000;
		}

		.time {
			font-weight: 400;
			font-size: 24rpx;
			color: #606060;
			margin-top: 6rpx;
			text-align: left;
		}

		.price {
			font-weight: 600;
			font-size: 30rpx;
			color: #d74b34;
			text-align: right;
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.left {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #606060;

				.point {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #606060;

					.text {
						margin-left: 6rpx;
					}
				}

				.date {
					font-weight: 400;
					font-size: 24rpx;
					margin-left: 17rpx;
				}
			}

			.right {
				font-weight: 400;
				font-size: 24rpx;
				color: #d74b34;
			}
		}
	}

	.update-but {
		width: 187rpx;
		height: 64rpx;
		background: #0759BB;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 64rpx;
		text-align: center;
	}
</style>